<template>
  <div>
    <Search :search="search" :reset="reset">
      <template v-slot:body>
        <el-form-item label="生产用料清单 :" prop="fbillno">
          <el-input v-model="query.fbillno" />
        </el-form-item>
        <el-form-item label="产品SKU :" prop="fmaterialid">
          <el-input v-model="query.fmaterialid" />
        </el-form-item>
        <el-form-item label="产品名称 :" prop="fmaterialname">
          <el-input v-model="query.fmaterialname" />
        </el-form-item>
        <el-form-item label="生产车间 :" prop="fworkshopid_name">
          <el-input v-model="query.fworkshopid_name" />
        </el-form-item>
        <el-form-item label="生产车间 :" prop="fworkshopid_name">
          <el-input v-model="query.fworkshopid_name" />
        </el-form-item>
        <el-form-item label="生产线 :" prop="fline">
          <el-input v-model="query.fline" />
        </el-form-item>
        <el-form-item label="计划配置类型 :" prop="plantype">
          <el-select v-model="query.plantype" placeholder="选择计划配置类型" clearable>
            <el-option v-for="item in plantypeArr" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="计划生产日期 :" prop="fplannedstarttime">
          <!-- {{ query.fplannedstarttime }} -->
          <el-date-picker v-model="query.fplannedstarttime" type="daterange" value-format="YYYY-MM-DD" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"  />
          <!-- <el-date-picker v-model="query.fplannedstarttime" type="date" value-format="YYYY-MM-DD" placeholder="选择某天日期" /> -->
        </el-form-item>
        <el-form-item label="查询本周范围 :" prop="range">
          <el-switch v-model="query.range" class="ml-2" inline-prompt active-text="查询本周" inactive-text="查询全部" />
        </el-form-item>
      </template>
    </Search>
    <div class="table-default">
      <!-- <Operate :show="open"  /> -->
      <!-- <Operate /> -->
      <router-link :to="{ path: '/pmcsignage/theweekplanCreate' }">
        <Operate />
      </router-link>

      <el-table :data="tableData" class="mt-3" v-loading="loading" border>
        <el-table-column label="生产用料清单" prop="fbillno" width="150" />
        <el-table-column label="产品SKU" prop="fmaterialid" width="100" />
        <el-table-column label="产品名称" prop="fmaterialname" width="130" />
        <el-table-column label="生产车间" prop="fworkshopid_name" width="130" />
        <el-table-column label="生产线" prop="fline" width="130" />
        <el-table-column label="备料套数" prop="back_number" width="90">
          <template #default="scope">
            <span> {{ Number(scope.row.back_number) }}</span>
            <!-- <span v-if="Number(scope.row.back_number) !=0 "> {{ Number(scope.row.back_number) }}</span>
          <span></span> -->
          </template>
        </el-table-column>
        <el-table-column label="计划配置" prop="plantype" width="90" />
        <el-table-column label="计划生产日期" prop="fplannedstarttime" width="170" />
        <el-table-column label="计划生产数量" prop="planqty" width="110" />
        <el-table-column label="计划人工" prop="plan_labor" width="90" />
        <el-table-column label="计划生产时长" prop="production_time" width="110" />
        <el-table-column label="计划总工时" prop="plan_total" width="100" />
        <el-table-column label="备注" prop="remark" width="150" />
        <el-table-column label="创建人" prop="creator_id" width="130" />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <Update @click="open(scope.row.id)" />
            <Destroy @click="destroy(api, scope.row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <Paginate />
    </div>

    <Dialog v-model="visible" :title="title" destroy-on-close>
      <Create @close="close(reset)" :primary="id" :api="api" :plantypeArr="plantypeArr" />
    </Dialog>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, reactive, watch } from 'vue'
import Create from './create.vue'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import http from '/admin/support/http'
import { ElMessage } from 'element-plus'

const api = `/pmcsignage/theweekplan`

const { data, query, search, reset, loading } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()

const tableData = computed(() => data.value?.data)

// query.value.plantype = ''

let plantypeArr = ref([])
let plantypeObj = reactive({})

const getplantype = () => {
  // 类型配置
  http.get('/pmcsignage/plantype').then(r => {
    console.log('类型配置', r.data)
    if (r.data.code == 10000) {
      plantypeArr.value = r.data.data
      // plantypeArr.value.push({ label: '全部', value: '' })
      plantypeObj = r.data.data.reduce((prev, item) => {
        prev[item.value] = item.label
        return prev
      }, {})
      console.log(plantypeArr.value, plantypeObj)
    } else {
      ElMessage.error(r.data.message)
    }
  })
}

watch(query.value, (newVal, oldVal) => {
  // query.theweek
  console.log('监听 query', newVal.range)
  if (newVal.range) {
    query.value.theweek = 'curWeek'
  } else {
    query.value.theweek = null
  }
})

onMounted(() => {
  getplantype() //类型配置

  search()
  deleted(reset)
})
</script>
